{% load i18n %}
<div class="setup-container">
    <legend>{% trans "Social Login Setup" %}</legend>
    <h4>{% trans "To enable social login for providers, you first need to create an OAuth application on the provider's website." %}</h4>
    <p>
        {% trans "Note: When running tests on the server, the tickets component URL is typically" %} <code>https://app-test.eventyay.com/tickets/</code>.
    </p>
    <p>
        {% trans "Therefore, the complete callback URL should be" %} <code>https://app-test.eventyay.com/tickets/accounts/{provider}/login/callback/</code>.
    </p>
    <p>
        {% trans "If you are running on localhost, the callback URL is" %} 
        <code>http://localhost:8000/accounts/{provider}/login/callback/</code>.
    </p>

    <section>
        <h4><strong>{% trans "I. Google OAuth Application" %}</strong></h4>
        <p>
            {% trans "Create an OAuth application on" %} <a href="https://console.developers.google.com/">Google Developer Console</a>
        </p>
        <p>{% trans "Instructions:" %}</p>
        <ul>
            <li>{% trans "Follow the setup guide:" %} 
                <a href="https://medium.com/@tony.infisical/guide-to-using-oauth-2-0-to-access-google-apis-dead94d6866d">Guide to using OAuth 2.0 to access Google APIs</a>
            </li>
            <li>{% trans "Set the callback URL to:" %} 
                {% with callback_url=tickets_domain|add:"/accounts/google/login/callback/" %}
                    <code>{{ callback_url }}</code>
                {% endwith %}
            </li>
            <li>{% trans "Add the client ID and client secret to admin settings" %}</li>
        </ul>
    </section>

    <section>
        <h4><strong>{% trans "II. GitHub OAuth Application" %}</strong></h4>
        <p>
            {% trans "Create an OAuth application on" %} <a href="https://github.com/settings/applications/new">GitHub Applications</a>
        </p>
        <p>{% trans "Instructions:" %}</p>
        <ul>
            <li>{% trans "Set the callback URL to:" %} 
                {% with callback_url=tickets_domain|add:"/accounts/github/login/callback/" %}
                    <code>{{ callback_url }}</code>
                {% endwith %}
            </li>
            <li>{% trans "Add the client ID and client secret to admin settings" %}</li>
        </ul>
    </section>

    <section>
        <h4><strong>{% trans "III. MediaWiki OAuth Application" %}</strong></h4>
        <p>
            {% trans "To enable MediaWiki social login for your Eventyay instance, you need to register an OAuth application with MediaWiki." %}
        </p>

        <strong>{% trans "Important Notes" %}</strong>
        <ul>
            <li>{% trans "The OAuth application must be approved by a MediaWiki administrator" %}</li>
            <li>{% trans "Until approved, only the application owner can log in" %}</li>
        </ul>

        <strong>{% trans "Registration Steps" %}</strong>
        <ol>
            <li>{% trans "Register your OAuth application at:" %} 
                <a href="https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration/propose">MediaWiki OAuth Consumer Registration</a>
            </li>
            <li>{% trans 'Click "Propose new OAuth 2.0 client"' %}</li>
            <li>
                {% trans "On the form enter" %}
                <ol type="a">
                    <li>{% trans "an application name" %}</li>
                    <li>{% trans "an description description" %}</li>
                    <li>
                        {% trans 'Set Oauth "callback" URL to:' %}
                        {% with callback_url=tickets_domain|add:"/accounts/mediawiki/login/callback/" %}
                            <code>{{ callback_url }}</code>
                        {% endwith %}
                    </li>
                    <li>{% trans "Contact Email address" %}</li>
                    <li>{% trans 'Tick "Client is confidential"' %}</li>
                    <li>{% trans 'Tick "Authorization code"' %}</li>
                    <li>{% trans 'Tick "Refresh token"' %}</li>
                    <li>{% trans 'Choose "Request authorization for specific permissions."' %}</li>
                    <li>{% trans 'In the section "Applicable grants" select "Basic Rights" and "Access private information"' %}</li>
                    <li>{% trans "Finally tick the box to accept the terms and submit." %}</li>
                </ol>
            </li>
            <li>{% trans "On the next page copy the registered application will return the OAuth access information:" %}
                <ul>
                    <li>{% trans "Client application key" %}</li>
                    <li>{% trans "Client application secret" %}</li>
                </ul>
            </li>
            <li>{% trans "Add the client application key and client application secret to your Eventyay social auth settings" %}</li>
        </ol>

        <strong>{% trans "After Approval" %}</strong>
        <p>
            {% trans "Once approved, other users can log in to your Eventyay instance using their MediaWiki account." %}
        </p>
    </section>
</div>
